<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
		<title>个税工具</title>
		<link crossorigin="anonymous" integrity="sha384-SkgH0ywfC/GONG2LxvaLuVuYjQqVrU/xL+FAW2Wv5zzfRZ8bmp/Na5dO3T0Zuzdh" href="https://lib.baomitu.com/weui/1.1.3/style/weui.min.css" rel="stylesheet" />
		<link href="https://lib.baomitu.com/jquery-weui/1.2.0/css/jquery-weui.min.css" rel="stylesheet" />
		<script src="https://lib.baomitu.com/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://lib.baomitu.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
		<script src="https://lib.baomitu.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
		<style>
			body {
				overflow: auto;
			}
			
			.my-form .weui-cell__bd {
				display: flex;
			}
			
			.my-form.weui-cells.weui-cells_form {
				font-size: 15px;
				margin-top: 0;
			}
			
			.my-form .weui-cell__bd label {
				padding: 0 5px;
			}
			
			.my-tips {
				font-size: 12px;
			}
			
			.my-tips p:first-child {
				font-size: 14px;
				color: #444;
				font-weight: 600;
			}
			
			.my-item {
				padding: 15px 10px;
			}
			
			.my-item .weui-btn {
				line-height: 35px;
				font-size: 15px;
				border-radius: 3px;
			}
			
			.subjoin-box {
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: #fff;
				z-index: 5;
				overflow: auto;
			}
			
			.my-form .weui-cell__hd>p {
				font-size: 12px;
				color: #666;
				width: 105px;
				text-align: left;
			}
			
			.my-form .weui-cell__hd>p:first-child {
				font-size: 13px;
				color: #000;
			}
			
			.subjoin-box .weui-cells__title {
				font-size: 13px;
				color: #000;
				font-weight: 600;
				display: flex;
			}
			
			.subjoin-box .weui-cells__title .info {
				font-weight: 400;
				color: #ff8369;
				font-weight: 600;
				font-size: 12px;
			}
			
			.weui-dialog__bd p {
				font-size: 14px;
				text-align: start;
				padding: 8px 0;
			}
			
			.my-right-input {
				text-align: right;
				padding-right: 5px;
			}
		</style>
	</head>

	<body>
		<div style="font-weight:600;text-align: center;font-size: 17px;padding: 8px 0;">2018年10月新个税计算器</div>
		<div class="weui-cells weui-cells_form my-form">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">税前工资</label></div>
				<div class="weui-cell__bd">
					<input id="txtIncome" class="weui-input" type="number" placeholder="税前工资">元
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">五险一金</label></div>
				<div class="weui-cell__bd">
					<input id="txtInsure" value="0" class="weui-input" type="number" placeholder="五险一金">元
				</div>
			</div>
			<div class="weui-cell weui-cell_vcode">
				<div class="weui-cell__hd"><label class="weui-label">专项附加扣除</label></div>
				<div class="weui-cell__bd">
					<input id="txtOther" value="0" class="weui-input" type="number" placeholder="专项附加扣除">
					<label>元</label>
				</div>
				<div class="weui-cell__ft">
					<button onclick="openModel()" class="weui-vcode-btn">计算</button>
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">起征点</label></div>
				<div class="weui-cell__bd">
					<input id="selBaseLine" class="weui-input" value="5000" placeholder="起征点">元
				</div>
			</div>
		</div>
		<div class="weui-flex">
			<div class="weui-flex__item my-item">
				<a href="javascript:void(0);" onclick="btnCalcCompute()" class="weui-btn weui-btn_primary" style="background: #01aaee;">计算</a>
			</div>
			<div class="weui-flex__item my-item">
				<a href="javascript:void(0);" onclick="btnCalcReset()" class="weui-btn weui-btn_primary" style="background: #ff8369;">重置</a>
			</div>
		</div>
		<div class="weui-cells weui-cells_form my-form">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">应纳税所得额</label></div>
				<div class="weui-cell__bd">
					<input id="txtTaxableIncome" class="weui-input my-right-input" type="number" disabled="disabled" placeholder="应纳税所得额">元
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">税率</label></div>
				<div class="weui-cell__bd">
					<input id="txtRate" class="weui-input my-right-input" type="number" disabled="disabled" placeholder="税率">%
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">速算扣除数</label></div>
				<div class="weui-cell__bd">
					<input id="txtDeduct" class="weui-input my-right-input" type="number" disabled="disabled" placeholder="速算扣除数">元
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">应纳税额</label></div>
				<div class="weui-cell__bd">
					<input id="txtTax" class="weui-input my-right-input" type="number" disabled="disabled" placeholder="应纳税额">元
				</div>
			</div>
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">税后工资</label></div>
				<div class="weui-cell__bd">
					<input id="txtIncomeAT" class="weui-input my-right-input" type="number" disabled="disabled" placeholder="税后工资">元
				</div>
			</div>
		</div>
		<div class="weui-cells__tips my-tips">
			<p>注:</p>
			<p>应税额 = 税前工资收入金额 － 五险一金(个人缴纳部分) － 起征点(5000元) - 专项附加扣除</p>
			<p>应纳税额 = 应纳税所得额 x 税率 － 速算扣除数</p>
			<p>税后工资=税前工资 - 应纳税额－ 五险一金(个人缴纳部分)</p>
			<div style="height: 8px;"></div>
			<p>除以上专项附加扣除项以外，还有两项按年抵扣的附加扣除项：</p>
			<p>本人本年度职业技能教育取得证书：3600元/年</p>
			<p>大病医疗，个人承担超过15000元的部分：60000元/年限额</p>
		</div>
		<div id="subjoinDiv" class="subjoin-box">
			<div style="font-weight:600;text-align: center;font-size: 16px;padding: 15px 0;">专项附加扣除计算(2019年1月1日起执行)</div>
			<div class="weui-cells__title" style="margin-top: 0;">子女教育(学前教育、学历教育):
				<div style="flex: 1;"></div><label class="info" onclick="openTip(0)">详细</label></div>
			<div class="weui-cells weui-cells_form my-form">
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">子女个数</label></div>
					<div class="weui-cell__bd">
						<input id="selSonNum" class="weui-input" value="0" type="text" placeholder="子女个数">个
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">分摊方式</label></div>
					<div class="weui-cell__bd">
						<input id="selShare" class="weui-input" type="text" value="不分摊，我0%" data-values="0" placeholder="分摊方式">
					</div>
				</div>
			</div>
			<div class="weui-cells__title">赡养老人(60岁(含)以上父母以及祖辈):
				<div style="flex: 1;"></div><label class="info" onclick="openTip(1)">详细</label></div>
			<div class="weui-cells weui-cells_form my-form">
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">是否有赡养</label></div>
					<div class="weui-cell__bd">
						<input id="selSupport" class="weui-input" type="text" value="否" data-values="0" placeholder="是否有赡养">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">分摊人数</label></div>
					<div class="weui-cell__bd">
						<input id="selShareNum" class="weui-input" type="text" value="1" placeholder="分摊人数">个
					</div>
				</div>
			</div>
			<div class="weui-cells__title">其他:
				<div style="flex: 1;"></div><label class="info" onclick="openTip(2)">详细</label></div>
			<div class="weui-cells weui-cells_form my-form">
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<p>本人继续教育</p>
						<p>(学历教育)</p>
					</div>
					<div class="weui-cell__bd">
						<input id="selContinue" class="weui-input" value="无" data-values="0" type="text" placeholder="本人继续教育">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<p>首套住房贷款</p>
						<p>(商业贷款或公积金贷款)</p>
					</div>
					<div class="weui-cell__bd">
						<input id="selHousingLoan" class="weui-input" value="无" data-values="0" type="text" placeholder="首套住房贷款">
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<p>住房租金</p>
						<p>(任职当地无自有住房)</p>
					</div>
					<div class="weui-cell__bd">
						<input id="selRenting" class="weui-input" value="无" data-values="0" type="text" placeholder="住房租金">
					</div>
				</div>
			</div>
			<div class="weui-flex">
				<div class="weui-flex__item my-item">
					<a href="javascript:void(0);" onclick="btnSubjoinCompute()" class="weui-btn weui-btn_primary" style="background: #01aaee;">计算</a>
				</div>
				<div class="weui-flex__item my-item">
					<a href="javascript:void(0);" onclick="btnSubjoinReset()" class="weui-btn weui-btn_primary" style="background: #ff8369;">重置</a>
				</div>
			</div>
		</div>
		<script>
			var selBaseLineList = ['5000']; // 个税的选择框的值
			var peopleNumList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
			var oldPeopleNumList = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
			var selShareList = [{
					title: "不分摊，我0%",
					value: "0"
				},
				{
					title: "不分摊，我100%",
					value: "1"
				},
				{
					title: "分摊，各50%",
					value: "0.5"
				}
			];
			var selSupportList = [{
				title: "否",
				value: "0"
			}, {
				title: "是",
				value: "1"
			}];
			var yesNoList = [{
				title: "无",
				value: "0"
			}, {
				title: "是",
				value: "1"
			}];
			var selRentingList = [{
				title: "无",
				value: "0"
			}, {
				title: "直辖市与省会",
				value: "1200"
			}, {
				title: "人口100万以上城市",
				value: "1000"
			}, {
				title: "人口100万以下城市",
				value: "800"
			}];
			
			$(function() {
				$('#subjoinDiv').hide(); // 默认 隐藏计算
				initSelect();
			})

			function initSelect() {
				// 个人起征点 初始化
				$("#selBaseLine").picker({
					title: "请选择个税起征点",
					cols: [{
						textAlign: 'center',
						values: selBaseLineList
					}]
				});
				// 子女数量 初始化
				$("#selSonNum").picker({
					title: "请选择子女数量",
					cols: [{
						textAlign: 'center',
						values: peopleNumList
					}]
				});
				// 老人分摊方式
				$("#selShare").select({
					title: "选择分摊方式",
					items: selShareList
				});
				// 是否赡养老人
				$("#selSupport").select({
					title: "是否赡养老人",
					items: selSupportList
				});
				// 分摊数量
				$("#selShareNum").picker({
					title: "请选择分摊人数",
					cols: [{
						textAlign: 'center',
						values: oldPeopleNumList
					}]
				});
				// 有无继续学习
				$("#selContinue").select({
					title: "有无继续学习",
					items: yesNoList
				});
				// 有无首套住房贷款
				$("#selHousingLoan").select({
					title: "有无首套住房贷款",
					items: yesNoList
				});
				// 租房 地点
				$("#selRenting").select({
					title: "请选择租房地点",
					items: selRentingList
				});
			}
			// 打开附加钱计算
			function openModel() {
				$('#subjoinDiv').slideDown();
				btnSubjoinReset();
			}

			// 计算
			function btnCalcCompute() {
				if($("#txtIncome").val() == ''){
					$.toast("请输入税前收入", "cancel");
					return;
				}
				//税前收入 验证
				var income = Number($("#txtIncome").val());
				if(income < 0) {
					$.toast("税前收入不能小于0", "cancel");
					return;
				}

				//五险一金 验证
				var insure = Number($("#txtInsure").val());
				if(insure < 0) {
					$.toast("五险一金不能小于0", "cancel");
					return;
				}

				//可扣除项 验证
				var other = Number($("#txtOther").val());
				if(other < 0) {
					$.toast("专项附加扣除能小于0", "cancel");
					return;
				}
				//个税起征点
				var baseLine = Number($("#selBaseLine").val());
				//应纳税所得额
				var taxableIncome = income - insure - baseLine - other;
				if(taxableIncome < 0) {
					taxableIncome = 0;
				}

				var rate = 0;
				var deduct = 0;
				//计算缴税级数
				var level = calcLevel(taxableIncome);
				switch(level) {
					case 0:
						rate = 0;
						deduct = 0;
						break;
					case 1:
						rate = 3;
						deduct = 0;
						break;
					case 2:
						rate = 10;
						deduct = 210;
						break;
					case 3:
						rate = 20;
						deduct = 1410;
						break;
					case 4:
						rate = 25;
						deduct = 2660;
						break;
					case 5:
						rate = 30;
						deduct = 4410;
						break;
					case 6:
						rate = 35;
						deduct = 7160;
						break;
					case 7:
						rate = 45;
						deduct = 15160;
						break;
				}
				//应纳税额(应纳税所得额 × 税率 － 速算扣除数)
				var tax = taxableIncome * rate / 100 - deduct;
				//税后工资(税前工资 － 五险一金 － 应纳个税)
				var incomeAT = income - insure - tax;
				$("#txtIncome").val(Number(income).toFixed(2));
				$("#txtInsure").val(Number(insure).toFixed(2));
				$("#txtTaxableIncome").val(Number(taxableIncome).toFixed(2));
				$("#txtRate").val(Number(rate).toFixed(2));
				$("#txtDeduct").val(Number(deduct).toFixed(2));
				$("#txtTax").val(Number(tax).toFixed(2));
				$("#txtIncomeAT").val(Number(incomeAT).toFixed(2));
			}
			//计算缴税级数
			function calcLevel(taxableIncome) {
				if(taxableIncome <= 0) {
					return 0;
				} else if(taxableIncome <= 3000) {
					return 1;
				} else if(taxableIncome <= 12000) {
					return 2;
				} else if(taxableIncome <= 25000) {
					return 3;
				} else if(taxableIncome <= 35000) {
					return 4;
				} else if(taxableIncome <= 55000) {
					return 5;
				} else if(taxableIncome <= 80000) {
					return 6;
				} else if(taxableIncome > 80000) {
					return 7;
				}
			}

			// 重置
			function btnCalcReset() {
				$("#txtIncome").val('');
				$("#txtInsure").val('0');
				$("#txtOther").val('0');
				$("#txtTaxableIncome").val('');
				$("#txtRate").val('');
				$("#txtDeduct").val('');
				$("#txtTax").val('');
				$("#txtIncomeAT").val('');
				$("#selBaseLine").val(selBaseLineList[0])
			}

			// 附加的计算
			function btnSubjoinCompute() {
				//子女教育费用
				var zinv = $('#selSonNum').val() * $('#selShare').attr('data-values') * 1000;
				//赡养老人费用
				var laoren = ($('#selSupport').attr('data-values') * 2000) / $('#selShareNum').val();
				//本人继续教育
				var jixu = $('#selContinue').attr('data-values') * 400;
				//首套住房贷款
				var zfdaikuan = $('#selHousingLoan').attr('data-values') * 1000;
				//住房租金
				var zfzujin = $('#selRenting').attr('data-values') * 1;
				var result = zinv + laoren + jixu + zfdaikuan + zfzujin;
				$('#txtOther').val(result);
				$.toptip('计算得出专项附加扣除:' + result, 'success');
				$('#subjoinDiv').slideUp();
			}
			// 附加的重置
			function btnSubjoinReset() {
				$('#selSonNum').val(peopleNumList[0]);
				$('#selShareNum').val(oldPeopleNumList[0]);

				$('#selShare').attr('data-values', selShareList[0].value);
				$('#selShare').val(selShareList[0].title);
				$('#selSupport').attr('data-values', selSupportList[0].value);
				$('#selSupport').val(selSupportList[0].title);

				$('#selContinue').attr('data-values', yesNoList[0].value);
				$('#selContinue').val(yesNoList[0].title);
				$('#selHousingLoan').attr('data-values', yesNoList[0].value);
				$('#selHousingLoan').val(yesNoList[0].title);
				$('#selRenting').attr('data-values', selRentingList[0].value);
				$('#selRenting').val(selRentingList[0].title);
			}

			// 显示规则的
			function openTip(type) {
				switch(type) {
					case 0: // 子女教育(学前教育、学历教育)
						$.alert("<p>子女教育（学前教育、学历教育）:1000元/月/个子女，双方各50%或一方100%</p>", "子女教育");
						break;
					case 1: // 赡养老人(60岁(含)以上父母以及祖辈):
						$.alert("<p>赡养老人（60岁（含）以上父母以及祖辈）:最高2000元/月，多个老人不叠加，兄弟姐妹均摊或约定其中一人扣除</p>", "赡养老人");
						break;
					case 2: // 其他
						$.alert("<p>本人继续教育（学历教育）:400元/月</p><p>首套住房贷款（商业贷款或公积金贷款）:1000元/月，仅其中一方(夫妻)扣除</p><p>住房租金（任职当地无自有住房）: 直辖市与省会1500元/月 人口100万以上城市1100元/月 人口100万以下城市800元/月 夫妻双方择一（双方不同城分别扣）</p>", "其他");
						break;
				}
			}
		</script>
	</body>

</html>